<!DOCTYPE html>
<html ng-app="myappz">
<head lang="en">
    <meta charset="UTF-8">
    <meta name='viewport' content="width=device-width,initial-scale=1"/>
    <title>Angular</title>
    <link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/medias.css">
    <link rel="stylesheet" href="/components/dist/css/swiper.min.css">
    <link rel="stylesheet" href="/css/swiper.css">
    <link rel="stylesheet" href="/css/product.css">
    <script src="/components/jquery/dist/jquery.js"></script>
    <script src="/components/angular/angular.js"></script>
    <script src="/components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="/components/dist/js/swiper.min.js"></script>
</head>
<body ng-controller="myctrlz">
<div class="zh">
    <div id="main-wrapper" class="with-footer">
        <div id="header" class="clearfix">
            <div class="left">
                <a href="javascript:history.back(-1)" class="go-back" >返回</a>
            </div>
            <div class="center">
                <h1 id="page-title">商品详情</h1>
            </div>
            <div class="right">
                <a class="home icon-menu" href="#">首页</a>
            </div>
        </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#">
                    <img ng-src={{LIST[id2].slideimgSrc[0][0]}} />
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img ng-src={{LIST[id2].slideimgSrc[1][0]}} />
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img ng-src={{LIST[id2].slideimgSrc[2][0]}} />
                </a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
        <div class="product-base-info">
            <div class="top clearfix">
                <div class="prod-name">
                    <a href="http://10246.mcshop.com.cn/products/15173">悠漫（Lancasten）进口奶源奶焙糖 原味香纯奶焙糖袋装500g</a>
                </div>
                <div class="prod-border"></div>
                <div ng-init="flag=true" ng-class="{'collect-button':flag,'collect-button-ss':!flag}" ng-click="flag=!flag" data-pid="15173">
                    <span class="collect-icon" ></span>
                    <span class="collect-text"><span class="collected">已</span>收藏</span>
                </div>
            </div>
            <div class="middle">
                <div class="sale-price-wrapper clearfix">
                    <div class="prod-sale-price">
                        <span>￥39.00</span>
                    </div>
                </div>
                <div class="par-price-wrapper clearfix">
                    <div class="prod-par-price">
                        <span>￥49.00</span>
                    </div>
                    <div class="prod-border"></div>
                    <div class="prod-sale-count">
                        <span>已售0件</span>
                    </div>
                </div>
                <div class="express-price">
                    <span>邮费：15.00</span>
                </div>
            </div>
            <div class="select-attributes" ng-click="addgo()">
                <span>选择：重量</span>
            </div>
            <div class="more-detail">
                <a ng-href="/details/xiangqing?id={{LIST[id2].id}}&type={{type}}">查看参数及图文详情</a>
            </div>
        </div>
        <div class="product-comments clearfix">
            <div class="comments-info clearfix">
                <div class="comments-count">
                    商品评价（0）
                </div>
                <div class="comments-avg-start">
                    <ul class="five-star">
                        <li class="1"></li>
                        <li class="2"></li>
                        <li class="3"></li>
                        <li class="4"></li>
                        <li class="5"></li>
                    </ul>
                </div>
            </div>
            <div class="comments-view-more">
                <a href="/details/pinglun">查看更多评价</a>
            </div>
        </div>
    </div>
    <!--隐藏的部分-->
    <div class="product-attr-select-form-bg" id="addgo" >
        <div id="product-attr-select-form-wrapper">
            <div class="product-base-info clearfix">
                <div id="close-form-button" ng-click="addgo2()"></div>
                <div class="prod-img">
                    <img ng-src={{LIST[id2].slideimgSrc[0][0]}} width="640" height="640" alt="悠漫（Lancasten）进口奶源奶焙糖 原味香纯奶焙糖袋装500g">
                </div>
                <div class="prod-price">
                    <span id="sale-price">￥39.00</span>
                    <span class="prod-stock">(库存：<i id="total-stock">300</i>)</span>
                </div>
                <div class="prod-selected-attr">
                    <span>请选择：重量</span>
                </div>
            </div>
            <div id="product-attributes">
                <form method="post" action="http://10246.mcshop.com.cn/shopping/checkout" accept-charset="UTF-8" id="product-attributes-form"><input name="_token" type="hidden" value="0kk5h53nWa9Z48k3fUw6aTgX3YPrS8ypedcSNgmu">
                    <div class="attribute">
                        <div class="attr-name" >
                            重量
                        </div>
                        <div class="attr-list clearfix" >
                            <ul>
                                <li class="option" id="addd" ng-click="ccc()">
                                    <span>500g</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="product-buy-count" class="clearfix">
                        <label>数量</label>
                        <div class="buy-count-form">
                            <input id="buy-count" type="text" value={{Count}} ng-model="Count" ng-init="Count=1" name="num"/>
                            <span class="sub" ng-click="sub()">-</span>
                            <span class="plus" ng-click="plus()">+</span>
                        </div>
                    </div>
                    <input id="entityId" name="entityId" type="hidden" value="0">
                    <input name="productId" type="hidden" value="15173">
                    <input name="activity" type="hidden" value="0">
                    <input name="distributor_product_id" type="hidden" value="0">
                </form>
            </div>
        </div>
    </div>
<!--尾部-->
    <div id="footer">
        <table class="add-to-cart" style="height:100%">
            <tbody>
            <tr>
                <td class="shopping-cart-wrapper">
                    <a href="http://10246.mcshop.com.cn/shopping/cart" class="shopping-cart-base">
                        <span class="cart-prod-num"><span>0</span></span>
                    </a>
                </td>
                <td><span class="add-to-cart-button" ng-click="addgo()"><span>加入购物车</span></span></td>
                <td><span class="buy-button" ng-click="addgo()"><span>立即购买</span></span></td>
                <td class="confirm"><span class="submit-button" ng-click="cartgo()"><span>确定</span></span></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    var app = angular.module('myappz', ['ui.router']);
    app.factory('Detail',['$http',function($http){
        return{
            search:function(type){
                return $http.get('/api/candy/get'+type+'list')
            }
        }
    }])
    app.controller('myctrlz', ['$scope','$location','Detail','$http',function ($scope,$location,Detail,$http) {
            $scope.xiabiao = $location.absUrl().indexOf('?')+1;
            $scope.str = $location.absUrl().substring($scope.xiabiao);
            $scope.id = $scope.str.split('&')[0].split('=')[1];
            $scope.id2 = $scope.id-1;
            $scope.type = $scope.str.split('&')[1].split('=')[1];


        Detail.search($scope.type)
                .then(function(res){
                    $scope.LIST=res.data;
//                    console.log($scope.LIST);
                    $scope.cart={
                        pid:1,
                        content:$scope.LIST[$scope.id2].content,
                        price:$scope.LIST[$scope.id2].price,
                        weight:"500g",
                        count:$scope.Count,
                        imgSrc:$scope.LIST[$scope.id2].slideimgSrc[0][0]
                    }
                    var carts = {
                        username:'测试2',
                        pid:1,
                        content:$scope.LIST[$scope.id2].content,
                        price:$scope.LIST[$scope.id2].price,
                        weight:"500g",
                        count:$scope.Count,
                        imgSrc:$scope.LIST[$scope.id2].slideimgSrc[0][0]
                    }
                    console.log(carts);
                    $scope.cartgo=function(){
                        $http.post('/api/candy/addcart',carts)
                                .then(function (res) {
                                    if(res.data.result){
                                        alert('添加成功')
                                    }else {
                                        alert('添加失败')
                                    }
                                },function(){})
                    }
                },function(){

                })


        var count = 1;
        $scope.ccc=function(){
            if(count%2==1){
                $('#addd').addClass('selected');
            }else{
                $('#addd').removeClass('selected');
            }
            count++;
        }
         var addgo=1;
        $scope.addgo= function () {
            if(addgo%2==1){
                $('#addgo').addClass('showing')
                $('#footer').addClass('selecting')
            }else {
                $('#footer').removeClass('selecting')
            }
            addgo++;
        }
        var addgo2=1;
        $scope.addgo2= function () {
            if(addgo2%2==1){
                $('#addgo').removeClass('showing')
                $('#footer').removeClass('selecting')
            }
        }
        $scope.sub= function () {

            if($scope.Count==1){
                return
            }
            $scope.Count--;
        }
        $scope.plus = function () {
            $scope.Count++;
        }
    }]);


</script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>

</body>
</html>